<template>
  <div>
    <div class="myform">
      <div class="center">
        <h1 style="text-align: center; color: #a56224">购物车</h1>
        <table id="table">
          <tr>
            <td>产品</td>
            <td></td>
            <td>价格</td>
            <td>购买数量</td>
            <td>小计</td>
            <td>操作</td>
          </tr>
          <tr>
            <td>
              <img width="70" src="/image/1639119765.jpg" alt="" />
            </td>
            <td>
              【射手座·宙斯♐️】性感而洒脱 由当季<br />红颜草莓形成红宝石冠冕
              海盐豆腐芝士<br />慕斯
            </td>
            <td>4.5时/{{ price }}元</td>
            <td>
              <button @click="count--" :disabled="count == 1">-</button>
              <input
                @blur="checkCount"
                style="width: 15px"
                v-model="count"
                type="text"
              />
              <button @click="count++">+</button>
            </td>
            <td>{{ count * price }}元</td>
            <td>
              <button @click="reMove">删除</button>
            </td>
          </tr>
          <tr>
            <td>
              <img width="70" src="/image/1641795952.jpg" alt="" />
            </td>
            <td>
              【虎轰轰】 与虎头互动 2022虎虎生威<br />
              栗子黑加仑慕斯
            </td>
            <td>4.5时/{{ price2 }}元</td>
            <td>
              <button @click="count2--" :disabled="count2 == 1">-</button>
              <input
                @blur="checkCounttwo"
                style="width: 15px"
                v-model="count2"
                type="text"
              />
              <button @click="count2++">+</button>
            </td>
            <td>{{ count2 * price2 }}元</td>
            <td>
              <button @click="reMove">删除</button>
            </td>
          </tr>
        </table>
        <h4>应付金额：{{getTotal}}元</h4>
        <div>
          <button>继续购物</button>
          <button @click="clearAll">清空购物车</button>
          <button>更新购物车</button>
          <button>立即结账</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
      count2: 1,
      price: 258,
      price2: 268,
    };
  },
  methods: {
    checkCount() {
      if (this.count <= 0) this.count = 1;
    },
    checkCounttwo() {
      if (this.count2 <= 0) this.count2 = 1;
    },
    reMove(e){
      e.target.parentNode.parentNode.className="none"
    },
    clearAll(){
      let table=document.getElementById("table")
      table.innerHTML=""
    }
  },
  computed: {
    getTotal() {
      return this.count * this.price+this.count2 * this.price2
    }
  },
};
</script>

<style lang="scss" scoped>
.myform {
  margin-top: 40px;
  .center {
    padding: 10px;
    border: 1px solid blanchedalmond;
    background-color: #f3f0ed;
    width: 50%;
    margin: auto;
    position: relative;
    .none{
      display: none;
    }
  }
  .center > h4 {
    position: absolute;
    right: 25px;
    bottom: 25px;
    color: #a56224;
  }
  .center > div {
    position: absolute;
    right: 25px;
    bottom: 10px;
    color: #a56224;
    button {
      margin-left: 50px;
      background-color: #543018;
      color: white;
      border-radius: 5px;
      padding:5px 12px;
      font-size: 13px;
    }
  }
  .center > table {
    width: 99%;
    border-top: 1px solid #572f1b;
    border-bottom: 1px solid #572f1b;
    font-size: 13px;
    padding: 5px;
    color: #572f1b;
    position: relative;
    margin-bottom: 70px;
    tr {
      height: 20px;
      line-height: 20px;
    }
    td:nth-child(5) {
      position: absolute;
      right: 16%;
    }
    td:nth-child(4) {
      position: absolute;
      right: 30%;
    }
    td:nth-child(3) {
      position: absolute;
      left: 52%;
    }
    td:nth-child(2) {
      position: absolute;
      left: 10%;
    }
    td:last-child {
      position: absolute;
      right: 1%;
    }
  }
}
</style>